<template>
  <div class="wrapper">
    <el-drawer
      @close="handleCloseDrawer"
      :visible.sync="showOperDialog"
      v-if="showOperDialog"
      direction="rtl"
      :destroy-on-close="true"
      :wrapperClosable="false"
      size="86%"
      append-to-body
      custom-class="step-drawer"
    >
      <template slot="title">
        <div>
          {{ this.modetip }}
        </div>
      </template>
      <component
        :is_incubator="is_incubator"
        :waybillInfo="waybillInfo"
        :businessType="businessType"
        :ids="ids"
        v-bind="$attrs"
        type="layer"
        @close="handleCloseDialog"
        :is="currentView"
      ></component>
    </el-drawer>
  </div>
</template>

<script>
import AddReceipt from "./addReceipt.vue";
import Distribution from "./distribution.vue";
import Delivery from "./delivery.vue";
import TrunkLine from "./trunkLine2.vue";
import Signfor from "./signfor.vue";
import Recycle from "./recycle.vue";
import TrunkLine2 from "./trunkLine2.vue";
import Arrival from "./arrival.vue";
import TemperatureBind from "./temperatureBind.vue";
import { getWaybillListFn, getTransportsList } from "@/api/waybill";

export default {
  name: "stepOperation",
  components: {
    Distribution,
    AddReceipt,
    Delivery,
    TrunkLine,
    Signfor,
    Recycle,
    TemperatureBind,
    TrunkLine2,
    Arrival,
  },
  props: ["showDialog", "step", "ids"],
  data() {
    return {
      viewArr: [
        "",
        "Delivery",
        "TrunkLine",
        "Distribution",
        "Signfor",
        "AddReceipt",
        "Recycle",
      ],
      steps: ["", "揽收单", "干线单", "配送单", "签收", "回单", "回箱"],
      showOperDialog: false,
      checkedWaybills: [],
      is_incubator: false,
      businessType: 0,
      waybillInfo: {},
    };
  },

  computed: {
    // showOperDialog: {
    //     get() {
    //         if(this.showDialog){
    //             getWaybillListFn({ ids: _ids, query_goods: "1" })
    //         }
    //         return this.showDialog;
    //     },
    //     set(val) {

    //     }
    // },
    currentView() {
      if (this.step === "20") {
        return "TrunkLine2";
      } else if (this.step === "30") {
        return "Arrival";
      }
      return this.viewArr[this.step];
    },
    modetip() {
      const mode = this.$attrs.mode;
      let text;
      if (this.step === "20") {
        text = "干线";
      } else if (this.step === "30") {
        text = "到港入库";
      } else {
        text = this.steps[this.step];
      }
      if (mode === "add") {
        return `创建${text}`;
      } else if (mode === "edit") {
        return `编辑${text}`;
      } else if (mode === "detail") {
        return `${text}详情`;
      }
    },
  },
  mounted() {},
  provide() {
    return {
      bindTemp: this.bindTemp,
    };
  },
  watch: {
    showDialog: {
      immediate: true,
      handler: async function (newV) {
        // 是否符合要求
        if (newV) {
          const res = await this.isMeetCondition();
          if (res) {
            this.showOperDialog = newV;
            // console.log(this.waybillInfo,'waybillInfo')
            let result2 = await getTransportsList({ is_all: false });
            const transData = result2.data.data;
            const typeConfig =
              transData.find(
                (item) =>
                  item.id === this.checkedWaybills[0].waybill_product_type
              ) || {};
            this.is_incubator = typeConfig.is_incubator === "1";

            // is_incubator 0常温 1保温箱 2冷链
            // is_complete_vehicle 0零担  1整车
            if (
              typeConfig.is_incubator === "0" &&
              typeConfig.is_complete_vehicle === "0"
            ) {
              // 常温零担
              this.businessType = 1;
            } else if (
              typeConfig.is_incubator === "0" &&
              typeConfig.is_complete_vehicle === "1"
            ) {
              // 常温整车
              this.businessType = 2;
            } else if (
              typeConfig.is_incubator === "2" &&
              typeConfig.is_complete_vehicle === "0"
            ) {
              // 冷链零担
              this.businessType = 3;
            } else if (
              typeConfig.is_incubator === "2" &&
              typeConfig.is_complete_vehicle === "1"
            ) {
              // 冷链整车
              this.businessType = 4;
            } else if (typeConfig.is_incubator === "1") {
              // 保温箱类
              this.businessType = 5;
            }
          } else {
            // 不符合条件关闭弹框
            this.$emit("closeDialog", false);
            // this.showOperDialog = false;
          }
        } else {
          this.showOperDialog = false;
        }
      },
    },
  },
  methods: {
    handleCloseDrawer() {
      this.$emit("closeDialog", false);
      // this.showOperDialog = false;
    },
    handleCloseDialog(isUpdate = true) {
      this.$emit("closeDialog", isUpdate);
    },
    async isMeetCondition() {
      // console.log(this.ids,"==========")
      const step = this.step + "";
      const { data: res } = (await getWaybillListFn({ ids: this.ids })) || {};
      this.checkedWaybills = res.data || [];
      this.waybillInfo = this.checkedWaybills[0] || {};
      if (this.$attrs.mode !== "add" || step === "20" || step === "30") {
        return true;
      }
      if (this.ids.length === 0) {
        this.$message({
          message: "选中运单后可继续进行操作",
          type: "error",
        });
        return false;
      }

      // 揽收 干线 配送 需要产品类型一致
      if (["1", "2", "3"].indexOf(step) > -1) {
        const type = this.checkedWaybills[0].waybill_product_type;
        const typeSame = this.checkedWaybills.every(
          (item) => item.waybill_product_type === type
        );
        if (!typeSame) {
          this.$message({
            message: "产品类型不一致，不能批量操作！",
            type: "warning",
          });
          return false;
        }
        const status = this.checkedWaybills[0].status;
        const statusSame = this.checkedWaybills.every(
          (item) => item.status === status
        );
        if (!statusSame) {
          this.$message({
            message: "状态不一致，不能批量操作！",
            type: "warning",
          });
          return false;
        }
        // 揽收出发网点一致
        if (step === "1") {
          const fromId = this.checkedWaybills[0].from_network_id;
          const fromIdSame = this.checkedWaybills.every(
            (item) => item.from_network_id === fromId
          );
          if (!fromIdSame) {
            this.$message({
              message: "出发网点不一致，不能批量操作！",
              type: "warning",
            });
            return false;
          }
        }
        // 干线出发区域一致
        if (step === "2") {
          const fromAreaId = this.checkedWaybills[0].from_area_id;
          const fromAreaIdSame = this.checkedWaybills.every(
            (item) => item.from_area_id === fromAreaId
          );
          if (!fromAreaIdSame) {
            this.$message({
              message: "出发区域不一致，不能批量操作！",
              type: "warning",
            });
            return false;
          }
        }
        // 配送目的网点一致
        if (step === "3") {
          const toId = this.checkedWaybills[0].to_network_id;
          const toIdSame = this.checkedWaybills.every(
            (item) => item.to_network_id === toId
          );
          if (!toIdSame) {
            this.$message({
              message: "目的网点不一致，不能批量操作！",
              type: "warning",
            });
            return false;
          }
        }
      }
      if (step === "4") {
        if (this.checkedWaybills.length > 1) {
          this.$message({
            message: "只支持单个运单签收哦",
            type: "warning",
          });
          return false;
        }
      }

      return true;
    },
    // 子组件调用 温度绑定弹框
    async bindTemp(time, checkedTemp = []) {
      const result = await new Promise((resolve) => {
        this.$msgbox({
          message: (
            <TemperatureBind
              key={Date.now()}
              record={resolve}
              time={time}
              checkedBind={checkedTemp||[]}
            ></TemperatureBind>
          ),
          center: true,
          customClass: "temperature_msg",
          showConfirmButton: false,
          // showCancelButton: false,
          showClose: true,
        });
      });
      return result;
    },
  },
};
</script>
<style lang="scss" scoped>
/deep/.step_line .inputForm .el-form-item__content > .el-input {
  width: 80% !important;
}
/deep/.step_line .inputForm .el-table .el-form-item__content > .el-input {
  width: 100% !important;
}
/deep/.step_line .inputForm .el-form-item__content > .el-select {
  width: 80% !important;
}

/deep/.step_line .inputForm .select-add .el-form-item__content > .select-left {
  padding-right: 30px;
  box-sizing: border-box;
  border-radius: 4px 0 0 4px;
}
/deep/.step_line
  .inputForm
  .select-add
  .el-form-item__content
  > .select-left
  .el-input__inner {
  border-radius: 4px 0 0 4px;
}
/deep/.step_line .inputForm .select-add .el-form-item__content {
  display: flex;
}
/deep/.step_line .inputForm .select-add .add-right {
  width: 30px;
  position: relative;
  left: -30px;
  padding: 0;
  height: 28px;
  border-radius: 0 4px 4px 0;
  border-left-width: 0px;
  font-size: 18px;
  font-weight: bold;
}
/deep/.step_line .inputForm .select-add .add-right:active {
  border-color: #c6e2ff;
}
/deep/.step_line .inputForm .el-form-item__content > .el-cascader {
  width: 80% !important;
}
/deep/.step-drawer .el-drawer__title {
  margin-bottom: 10px;
}
</style>
<style lang="less">
.safari_table .el-table__body {
  width: 100% !important;
  table-layout: fixed !important;
}
.temperature_msg {
  width: auto;
}
</style>
